<template>
  <el-card>
    <div slot="header">
      <span>总体评价</span>
    </div>
    <el-row type="flex">
      <el-col>
        <div class="overall-rate">
          {{rate | formatPercent}}
        </div>
      </el-col>
      <el-col>
        <h3>非常不满</h3>
        <div class="rate-percent">{{rateList.rate1/rateList.feedback || 0 | formatPercent}}</div>
        <div>{{rateList.rate1}}</div>
      </el-col>
      <el-col>
        <h3>不满意</h3>
       <div class="rate-percent">{{rateList.rate2/rateList.feedback || 0 | formatPercent}}</div>
        <div>{{rateList.rate2}}</div>
      </el-col>
      <el-col>
        <h3>满意</h3>
         <div class="rate-percent">{{rateList.rate3/rateList.feedback || 0 | formatPercent}}</div>
        <div>{{rateList.rate3}}</div>
      </el-col>
      <el-col>
        <h3>非常满意</h3>
         <div class="rate-percent">{{rateList.rate4/rateList.feedback || 0 | formatPercent}}</div>
        <div>{{rateList.rate4}}</div>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
  import { getRateAmount } from "@/api/stat";
  export default {
    data() {
      return {
        rateList: {}
      }
    },
    created() {
      this.initData({
          shopId: 10
        })
    },
    methods: {
      initData(data) {
        getRateAmount(data).then(res => {
          let rateList = res.data.data[0]
          this.rate = (parseInt(rateList.rate1) + parseInt(rateList.rate2)*2 + parseInt(rateList.rate3)*3 + parseInt(rateList.rate4)*4) / (rateList.feedback*4)
          this.rateList = rateList
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .el-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .overall-rate {
    border-radius: 50%;
    border: .1rem solid #2CAC36;
    width: 1rem;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #686868;
    font-size: .3rem;
    margin-right: .1rem;
  }
  .rate-percent {
    color: #686868;
    font-size: .2rem;
  }
</style>
